<template>
  <div>
    <div class="personalInfo">
      <div class="inputGroup">
        <p for="username">联系人姓名<i></i></p>
        <input type="text" id='username' placeholder="您的姓名">
      </div>
      <div class="inputGroup">
        <p for="phone">手机号码<i></i></p>
        <input type="text" id='phone' placeholder="快递员联系您的方式">
      </div>
      <div class="inputGroup">
        <p for="region">所在地区<i></i></p>
        <input type="text" id='region' placeholder="选择地址">
        <i-icon type="enter" size="28" color="#9f9f9f" class="right" />
      </div>
      <div class="inputGroup">
        <p for="address">详细地址<i></i></p>
        <!-- <input type="text" id='address' placeholder="快递员上门取书的详细地址"> -->
        <picker mode="region" @change="bindRegionChange($event)" :value="region" :custom-item="customItem">
          <view class="picker">
            当前：{{region[0]}}，{{region[1]}}，{{region[2]}}
          </view>
        </picker>
      </div>
      <div class="inputGroup last">
        <p for="timer" class="getGoodsTime">请选择取货时间<i></i></p>
        <span class="getGoodsIimeInput" @click='showTime'>快递员上门取书的时间</span>

        <i-icon type="enter" size="28" color="#9f9f9f" class="right" />
      </div>
    </div>
    <read-buy></read-buy>
    <div class='footers'>
      <span>我已阅读并同意收书规则</span>
    </div>
    <div v-if='showTimes'>
      <pick-time></pick-time>
    </div>
    <div style="padding:0 18rpx;">
      <p class="submitBtn" @click="submitBtn">提交订单</p>
    </div>
    <div id='mask' v-if='modalPage' @click="closeModalPage">
      <div class="modal-wrapper">
        <h3>提交成功!</h3>
        <p>请在“我的订单”中查看详情和后续进展</p>
        <span @click="closeModalPage">我知道了</span>
      </div>

    </div>
  </div>
</template>
<script>
import readBuy from '../../components/readPay/readPay'
import pickTime from '../../components/selectDeliverTime/index'

export default {
    data() {
        return {
            username: '',
            phont: '',
            address: '',
            areaList: {},
            modalPage: false,
            showTimes: false,
            show: true,
            value: '',
            checked: false,
            region: ['广东省', '广州市', '海珠区'],
            customItem: '全部'
        }
    },
    methods: {
        onClose() {
            this.show = false
        },
        closeModalPage() {
            this.modalPage = false
        },
        handleAnimalChange(event) {
            this.checked = false
        },
        bindRegionChange(e) {
            console.log(e)
            console.log('picker发送选择改变，携带值为', e.mp.detail.value)
            this.region = e.mp.detail.value
        },
        showTime() {
            console.log('123')
            this.showTimes = true
        },
        submitBtn() {
            this.modalPage = true
        }
    },
    components: {
        readBuy,
        pickTime
    }
}
</script>

<style lang='scss' scoped>
.personalInfo {
    padding: 0 18rpx;
    .inputGroup {
        height: 94rpx;
        border-bottom: 1px solid #dddddd;
        position: relative;
        &.last {
            border: none;
        }
        .right {
            position: absolute;
            right: 18rpx;
            top: 50%;
            transform: translateY(-50%);
        }
        p {
            width: 30%;
            display: inline-block;
            font-size: 36rpx;
            color: #2b2b2b;
            height: 100%;
            line-height: 94rpx;
            vertical-align: middle;
            position: relative;
            &.getGoodsTime {
                width: 40%;
            }
            i {
                content: '';
                width: 1px;
                height: 20px;
                right: 5px;
                top: 50%;
                transform: translateY(-50%);
                position: absolute;
                background: #2b2b2b;
            }
        }
        input {
            display: inline-block;
            vertical-align: middle;
            width: 70%;
            color: #666;
            font-size: 28rpx;
            height: 100%;
            line-height: 94rpx;
            &.getGoodsIimeInput {
                width: 60%;
            }
            &::-webkit-input-placeholder {
                /* placeholder颜色  */
                color: #666;
                /* placeholder字体大小  */
                font-size: 28rpx;
                /* placeholder位置  */
                text-align: left;
            }
        }
        span {
            display: inline-block;
            vertical-align: middle;
            width: 70%;
            color: #666;
            font-size: 28rpx;
            height: 100%;
            line-height: 94rpx;
            &.getGoodsIimeInput {
                width: 60%;
            }
        }
        ._picker {
            display: inline-block;
            vertical-align: middle;
            width: 70%;
            color: #666;
            font-size: 28rpx;
            height: 100%;
            line-height: 94rpx;
        }
    }
}
.footers {
    position: fixed;
    bottom: 10rpx;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24rpx;
    color: #666;
}
.submitBtn {
    width: 100%;
    height: 74rpx;
    line-height: 74rpx;
    text-align: center;
    background: #c78550;
    border-radius: 10px;
    color: #fff;
    font-weight: bolder;
    font-size: 36rpx;
    margin-top: 60rpx;
}
#mask {
    background: rgba(0, 0, 0, 0.4);
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 20000;
    .modal-wrapper {
        width: 604rpx;
        height: 366rpx;
        background: #fff;
        border-radius: 10px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        h3 {
            font-size: 35rpx;
            color: #000;
            font-weight: bolder;
            width: 100%;
            text-align: center;
            padding: 60rpx 0;
        }
        p {
            font-size: 28rpx;
            color: #000;
        }
        span {
            display: block;
            width: 158rpx;
            height: 56rpx;
            background: #c78550;
            line-height: 56rpx;
            text-align: center;
            border-radius: 10px;
            font-size: 28rpx;
            color: #fff;
            margin: 60rpx auto;
        }
    }
}
</style>